<template>
  <div>
    <div class="box">
      <h3>小目标列表</h3>
      <h5>添加小目标</h5>
      <input
        type="text"
        placeholder="输入小目标后，按回车确认"
        class="inp"
        v-model="value"
        @keyup.enter="enter"
      />
      <p style="margin: 10px auto">
        共有{{ allsum }}个目标，已完成{{ ysum }}个,还有{{ wsum }}个未完成
      </p>
      <div>
        <form class="box1">
          <input name="target" value="0" type="radio" checked @change="tog" />
          <label value="all">所有目标</label>
          <input name="target" value="1" type="radio" @change="tog" />
          <label value="ylist">已完成目标</label>
          <input name="target" value="2" type="radio" @change="tog" />
          <label value="wlist">未完成目标</label>
        </form>
      </div>
      <!-- 目标列表 -->
      <div class="fx">
        <div class="li" v-for="(item, i) in list" :key="i">
            <div>
              <input
                type="checkbox"
                :checked="item.status"
                @click="eck(item)"
              />
              <span>{{ item.title }}</span>
            </div>
            <div class="x" @click.stop="del(item.id)">X</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      value: "", //输入框关键字
      alllist: [], //所有目标列表
      list: [], //当前显示的目标列表
      id: "", //当前选中的单选框的值
      flag: false,
    };
  },
  created() {
    this.alllist = JSON.parse(localStorage.getItem("alllist")) || [];
    this.getlist("0");
  },
  mounted() {},
  computed: {
    // 所有目标数量
    allsum() {
      return this.alllist.length;
    },
    // 已完成目标数量
    ysum() {
      return this.alllist.filter((item) => item.status).length;
    },
    // 未完成目标数量
    wsum() {
      return this.alllist.filter((item) => !item.status).length;
    },
  },
  methods: {
    // 点击单选框事件
    tog(val) {
      this.id = val.target.defaultValue;
      this.getlist(val.target.defaultValue);
    },
    // 根据不同的值切换数组
    getlist(val) {
      switch (val) {
        case "0":
          this.list = this.alllist;
          break;
        case "1":
          this.list = this.alllist.filter((item) => item.status);
          break;
        case "2":
          this.list = this.alllist.filter((item) => !item.status);
          break;
      }
    },
    // 键盘回车事件
    enter() {
      if (this.value) {
        let obj = {
          id: new Date().getTime(),
          title: this.value,
          status: false,
        };
        this.alllist.push(obj);
        localStorage.setItem("alllist", JSON.stringify(this.alllist));
        this.value = "";
        return false;
      }
      alert("内容不能为空！");
    },
    // 删除
    del(id) {
      this.alllist.forEach((item, i) => {
        if (item.id == id) {
          this.alllist.splice(i, 1);
        }
      });
      localStorage.setItem("alllist", JSON.stringify(this.alllist));
      this.getlist(this.id);
    },
    // 点击复选框
    eck(val) {
      this.alllist.forEach((item) => {
        if (item.id == val.id) {
          item.status = !item.status;
        }
      });
      localStorage.setItem("alllist", JSON.stringify(this.alllist));
    },
    // 双击事件
    sj(val) {
      this.flag = !this.flag;
    },
  },
};
</script>

<style scoped lang='scss'>
.box {
  width: 1000px;
  margin: auto;
  h3,
  h5 {
    margin: 20px auto;
  }
}
.inp {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
}
.box1 {
  display: flex;
  input {
    margin: 0 10px;
  }
  label {
    margin-right: 10px;
  }
}
.fx {
  margin: 10px auto;
  input {
    margin-right: 10px;
    vertical-align: middle;
  }
}
.li {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  margin: 10px auto;
  border: 1px solid transparent;
  position: relative;
}
.li .x {
  position: absolute;
  color: #f00;
  font-size: 20px;
  line-height: 40px;
  height: 40px;
  right: 20px;
  cursor: pointer;
  display: none;
  top: 0;
}
.li:hover {
  border: 1px solid blue;
}
.li:hover .x {
  display: block;
}
</style>
